<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>首页</title>
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/detail.css" />
    <script type="text/javascript" src="js/jquery/jquery-1.12.2.js"></script>
    <script type="text/javascript" src="js/jquery/jquery.request.js"></script>
    <script type="text/javascript" src="js/config/config.js"></script>
    <script type="text/javascript" src="js/utils.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script language=javascript>
      $(document).ready(function() {
        var contentId = getUrlParam('contentId');
        getAjaxRequst(global.ims + 'content/id/' + contentId, null, searchDetailCallback);
      });

      function searchDetailCallback(result){
        if(result.code != '200'){
          return ;
        }
        var data = result.data;
        $("#heading-title").html(data.content.contentName);
        var natureHtml = ''; var authorsHtml = '';
        natureHtml = '<p class="journal">'+ data.content.journal+ '</p>' + '<a href=' + data.content.dioHref + ' target="_blank">DOI: ' + data.content.dioName + '</a>';
        $("#nature").html(natureHtml);
        //作者
        var authors = data.authors; 
        for(var i=0; i< authors.length; i++) {
          authorsHtml += '<span class="authors-list-item ">' + 
                          '<span class="full-name">' + authors[i].author +'</span>' +
                          '<sup class="equal-contrib-container">' + authors[i].sortTag +'</sup>' + ', ' + 
                        '</span>';
        }
        if(authorsHtml.lastIndexOf('</sup>,') != -1) {
          authorsHtml = authorsHtml.substr(0, authorsHtml.lastIndexOf('</sup>,') + 6) + authorsHtml.substr(authorsHtml.lastIndexOf('</sup>,')+7);
        }
        $("#authors-list").html(authorsHtml);
        //作者地址
        var affilicationHtml = "";
        var affilications = data.affilications;
        for(var i=0; i<affilications.length; i++) {
          affilicationHtml += "<p>" + affilications[i].sortTag + "." + affilications[i].affiliation + "</p>";
        } 
        $("#affiliationDiv").html(affilicationHtml);
        $("#abstractEn p").text(data.content.abstracts);
        $("#abstractCn p").text(data.content.abstractsCn);
      }

      function showAffiliation(e){
        var divE = $(e).children("div");
        if(divE.hasClass('ico-up')) {
          divE.removeClass("ico-up").addClass("ico-down");
          //hide
          $("#affiliationDiv").hide();
        }else{
          divE.removeClass("ico-down").addClass("ico-up");
          //show
          $("#affiliationDiv").show();
        }
        
      }
    </script>
  </head>
  <body>
    <div id='divLogo' class="logo">
      <img style="float: left" src="images/logo.png" />
      <div id="nav">
        <ul> <a href="index.html"> HOME</a></ul>
        <ul> <a href="service.html"> SERVICES </a></ul>
        <ul> <a href="therapeutic.html"> TOPICES </a></ul>
        <ul> <a href="index.html"> CASES </a></ul>
        <ul> <a href="about.html"> ABOUT US </a></ul>
      </div>
    </div>
    <div class="content">
      <div class="search">
        <input class="searchInp" id="searchInp"/>
        <button class="searchBth" onclick="openArticles('es', $('#searchInp').val())"> search</button>
      </div>
      <div class="clear"></div>
      <div style="padding: 20px;">
        <div id="article-details" class="article-details">
          <div id="heading" class="heading">
            <div id="heading-title" class="heading-title"> </div>
            <div id="nature" class="nature"></div>
            <div class="clear"></div>
            <div class="inline-authors">
              <div class="authors">
                <div class="authors-list" id="authors-list"></div>
              </div>
            </div>
            <div class="clear"></div>
          </div>
          
          <div class="affiliation" id="affiliation"  onclick="showAffiliation(this)"><ul>Affiliation</ul><div class="ico-down"></div></div>
          <div style="clear: both;"></div>
          <div class="affiliationDiv" id="affiliationDiv" style="display:none">
          </div>
          
          <div id="abstractEn" class="abstract" style="margin-top:15px;">
            <p></p>
          </div>
          <div id="abstractCn" class="abstract" style="margin-top:15px;">
            <h5 >中文翻译：</h5>
            <img src='images/paperTranslation.png'/>
            <div class="clear"></div>
            <p></p>
          </div>
      </div>
    </div>
    <div style="clear: both;"></div>
    <div class="bottom"> 
        <div style="float:left">
          <img src="images/logo1.png"></div>
        <div style="float: left; width: 500px;">
          <div class="bottomEmail">
            <p style="font-size:16px;font-weight:600">Email: </p>
            <p>info@globemed.cn </p>
          </div>
          <div class="bottomAddress">
            <p style="font-size:16px;font-weight:600">Address: </p>
            <p>Building 7, Li & Fung Plaza, 2000 Yishan Road, Shanghai, China  201103</p>
          </div>
        </div>
      </div>
    </body>
  </html>